<template>
  <div class="common-layout">
    <el-container>
      <el-header style="height: 100px; background-color: #409eff">
        <div style="display: flex; flex-wrap: wrap; width: 100%">
          <h1 style="margin: 20px; font-size: 40px; color: white">
            Monitor System
          </h1>
          <el-dropdown>
            <el-button type="primary"  style="--el-button-bg-color: #8cde95; margin: 30px 30px 30px 1300px;transform: scale(1.1)">
              User setting<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="openDrawer()">My Info</el-dropdown-item>
                <el-dropdown-item @click="logout()">Logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>
      <el-container>
        <el-aside width="320px">
          <Aside style="margin-left: 30px; margin-top: 30%;"></Aside>
        </el-aside>
        <el-container>
          <el-main>
            <router-view/>
          </el-main>
          <el-footer>
            <h4>小组成员：A,B,C,D,E</h4>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false" direction="ttb">
    <el-descriptions
        class="margin-top"
        title="My Information"
        :column="3"
        size="large"
        border
        style="margin-left: 20%; width: 60%"
    >
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon size="18">
              <user />
            </el-icon>
            Username
          </div>
        </template>
        {{username}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon size="18">
              <iphone />
            </el-icon>
            Email
          </div>
        </template>
        {{email}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon size="18">
              <location />
            </el-icon>
            Place
          </div>
        </template>
        BJTU
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon size="18">
              <tickets />
            </el-icon>
            School
          </div>
        </template>
        <el-tag size="small">School</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon size="18">
              <office-building />
            </el-icon>
            Address
          </div>
        </template>
        Beijing Jiaotong University, Beixiaguan Street, Haidian District, Beijing
      </el-descriptions-item>
    </el-descriptions>
  </el-drawer>
</template>
<script>
import Aside from "@/components/Aside.vue";

export default {
  name: "Home",
  components: {Aside},
  data(){
    return{
      drawer: false,
      username: sessionStorage.getItem("username"),
      email: sessionStorage.getItem("email")
    }
  },
  methods:{
    openDrawer(){
      this.drawer = true
    },
    logout(){
      this.$router.push('/login')
    },
  }
}
</script>

<style scoped>
.common-layout{
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right top, #ffffff, #f8f9ff, #edf5ff, #def2ff, #cdefff, #c4edfb, #bbecf6, #b3eaef, #b3e9e8, #b3e7e1, #b5e5d9, #b8e3d2);
}
</style>